<template>
  <div class="app-container">
    <!--操作按钮-->
    <div style="padding-bottom: 30px;" class="operation_container">
      <ul>
        <li><el-button size="mini" @click="handleCancel">返回</el-button></li>
        <li><el-button size="mini" type="primary" @click="handleSubmit">保存</el-button></li>
      </ul>
    </div>
    <el-form ref="form" :model="data" :rules="rules" :inline="true" label-width="125px" size="mini">
      <!--折叠面板-->
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item name="basicInfo">
          <template slot="title">
            <span>基本信息</span>
            <i class="header-icon el-icon-info" />
          </template>
          <el-row class="form-item-group">
            <el-col :span="6">
              <el-form-item label="上级机构：">
                <el-cascader
                  v-model="data.pids"
                  :options="selects.orgList"
                  :props="{ expandTrigger: 'hover', checkStrictly: true, label: 'orgName', value: 'id' }"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="机构编码：" prop="id">
                <el-input v-model="data.id" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="机构类型：" prop="orgType">
                <el-select v-model="data.orgType" filterable clearable>
                  <el-option v-for="item in selects.orgTypeList" :key="item.key" :label="item.label" :value="item.key" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="机构级别：" prop="treeLevel">
                <el-input v-model="data.treeLevel" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="机构名称：" prop="orgName">
                <el-input v-model="data.orgName" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="机构全称：">
                <el-input v-model="data.orgFullName" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="全节点名称：">
                <el-input v-model="data.treeNames" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="排序：">
                <el-input v-model="data.treeSort" type="number" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item name="detailedInfo">
          <template slot="title">
            <span>详细信息</span>
            <i class="header-icon el-icon-info" />
          </template>
          <el-row class="form-item-group">
            <el-col :span="6">
              <el-form-item label="负责人：">
                <el-input v-model="data.leader" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="办公电话：">
                <el-input v-model="data.phone" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系地址：">
                <el-input v-model="data.address" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="form-item-group">
            <el-col :span="6">
              <el-form-item label="电子邮箱：">
                <el-input v-model="data.email" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="邮政编码：">
                <el-input v-model="data.postalCode" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="叶子节点：">
                <el-radio-group v-model="data.isLeaf">
                  <el-radio v-for="item in selects.ynTypeList" :key="item.key" :label="item.key">{{ item.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item name="otherInfo">
          <template slot="title">
            <span>其它信息</span>
            <i class="header-icon el-icon-info" />
          </template>
          <el-row class="form-item-group">
            <el-col :span="6">
              <el-form-item label="备注：">
                <el-input v-model="data.remark" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import appConstant from '@/constant/AppConstant'
import TreeUtils from '@/utils/TreeUtils'
import OrgApi from '@/api/system/OrgApi'

export default {
  directives: {
    waves
  },
  data() {
    return {
      activeNames: [
        'basicInfo',
        'detailedInfo',
        'otherInfo'
      ],
      selects: {
        ynTypeList: appConstant.ynTypeList,
        orgTypeList: appConstant.orgTypeList,
        orgList: []
      },
      options: undefined,
      data: {
        pids: []
      },
      // 校验规则的名称必须和校验字段的名称一致
      rules: {
        id: [{ required: true, message: '_', trigger: 'blur' }],
        orgType: [{ required: true, message: '_', trigger: 'change' }],
        treeLevel: [{ required: true, message: '_', trigger: 'blur' }],
        orgName: [{ required: true, message: '_', trigger: 'blur' }],
        appType: [{ required: true, message: '_', trigger: 'change' }]
      }
    }
  },
  created() {
    this.initForm()
    this.loadSelects()
  },
  methods: {
    initForm() {
      // 新增或编辑
      const id = this.$route.params.id
      if (id) {
        this.options = 'update'
        OrgApi.get(id).then(response => {
          this.data = response.data
          this.data.pids = this.data.pids.split(',')
        })
      } else {
        this.options = 'insert'
        // 添加下级机构
        const pid = this.$route.params.pid
        if (pid) {
          OrgApi.get(pid).then(response => {
            const sup = response.data
            // 初始化pid、pids、treeLevel
            this.data.pid = sup.id
            if (sup.pids) {
              this.data.pids = sup.pids.split(',')
              this.data.pids.push(sup.id)
            } else {
              this.data.pids = [sup.id]
            }
            this.data.treeLevel = sup.treeLevel + 1
          })
        } else {
          this.data.treeLevel = 1
        }
      }
    },
    loadSelects() {
      OrgApi.list().then(response => {
        this.selects.orgList = TreeUtils.list2Tree(response.data)
      })
    },
    handleSubmit() {
      if (this.data.pids && this.data.pids.length > 0) {
        this.data.pids = this.data.pids.join(',')
      } else {
        this.data.pids = undefined
      }
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.options === 'insert') {
            OrgApi.add(this.data).then(response => {
              this.$message.success('新增成功！')
              this.$router.go(-1)
            })
          } else if (this.options === 'update') {
            OrgApi.edit(this.data).then(response => {
              this.$message.success('编辑成功！')
              this.$router.go(-1)
            })
          }
        }
      })
    },
    handleCancel() {
      this.$router.go(-1)
    },
    handleChange(val) {
      console.log(val)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
